<template>
	<view class="category_wrapper">
		<!-- 章节项目 -->
		<view v-for="chapter in chapters" :key="chapter.id" class="category_wrapper_item" @tap="selectChapter(chapter)">
			<!-- 左侧图片 -->
			<view class="category_wrapper_item_img">
			</view>
			<!-- 右侧项目内容 -->
			<view class="category_wrapper_item_content">
				<view class="category_wrapper_item_content_title">
					{{chapter.name}}
				</view>
				<view class="category_wrapper_item_content_sub">
					{{chapter.questionNum}}题 | {{chapter.description}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getChaptersBySubjectId } from '../../service/api.js';

	export default {
		data() {
			return {
				subjectId: '',
				subjectName: '',
				chapters: []
			};
		},
		
		onLoad(options) {
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.redirectTo({ url: '/pages/login/index' });
				return;
			}
			this.subjectId = options.subjectId;
			this.subjectName = decodeURIComponent(options.subjectName || '');
			this.loadChapters();
		},
		
		onShow() {
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.redirectTo({ url: '/pages/login/index' });
			}
		},
		
		methods: {
			async loadChapters() {
				try {
					const res = await getChaptersBySubjectId(this.subjectId);
					this.chapters = res.data || [];
				} catch (err) {
					console.error('加载章节列表失败:', err);
					uni.showToast({
						title: '加载章节列表失败',
						icon: 'none'
					});
				}
			},
			
			selectChapter(chapter) {
				uni.navigateTo({
					url: '/pages/question/index?categoryId=' + chapter.id + '&subjectId=' + this.subjectId
				});
			}
		}
	};
</script>

<style>
	.category_wrapper {
		background: linear-gradient(135deg, rgba(170, 207, 252, 1) 0%, rgba(187, 208, 251, 1) 50%, rgba(178, 236, 248, 1) 100%);
		min-height: 100vh;
		padding: 30rpx;
	}

	.category_wrapper_item {
		background: rgba(255, 255, 255, 0.8);
		padding: 30rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.category_wrapper_item_img {
		width: 100rpx;
		height: 100rpx;
		background-image: url('../../static/icon.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.category_wrapper_item_content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 30rpx;
	}

	.category_wrapper_item_content_title {
		font-weight: bold;
		color: #000000d4;
		flex: 1;
	}

	.category_wrapper_item_content_sub {
		font-size: 24rpx;
		color: #0000008f;
		margin-top: 14rpx;
	}
</style>
